import Taro, {Component, Config} from '@tarojs/taro'
import { View, Image, Textarea } from '@tarojs/components'
import {SDBody} from 'sudao-ui'

import StarScore from '../../../../comps/star-score'
import CameraIcon from '../../../../images/ic_camera.png'

import './index.less'
import SDButton from "../../../../comps/sd-button";

export default class EvaluateFormPage extends Component {

  config: Config = {
    navigationBarTitleText: '发表评价'
  }

  render () {
    const { statusBarHeight, platform } = Taro.getSystemInfoSync()
    const bottomH = statusBarHeight == 44 ? 34 : 0

    return (
      <SDBody sd-class='container'>
        <View className='section'>
          <View className="header border-bottom_1px">
            <View className="img-content">
              <Image className="img-icon" src='' mode='aspectFill' lazyLoad></Image>
            </View>
            <View className="header-right">
              <View className="header-title">银河系925银叠戴基础手镯</View>
              <View className="header-price">￥98.00</View>
            </View>
          </View>

          <View className="cell-list">
            <View className="cell-item border-bottom_1px">
              <View className="title">描述相符</View>
              <StarScore itemWH={44} spacePadding={8} score={2} max={5} extData={0} onScoreChange={this.onStarScoreValueChange}/>
            </View>
            <View className="cell-item border-bottom_1px">
              <View className="title">物流服务</View>
              <StarScore itemWH={44} spacePadding={8} score={3} max={5} extData={1} onScoreChange={this.onStarScoreValueChange}/>
            </View>
            <View className="cell-item">
              <View className="title">服务态度</View>
              <StarScore itemWH={44} spacePadding={8} score={4} max={5} extData={2} onScoreChange={this.onStarScoreValueChange}/>
            </View>
          </View>
        </View>

        <View className="section section_form">
          <View className="form-content">
            {
              // @ts-ignore
              <Textarea className={`input-text ${platform.toLowerCase().indexOf('ios') < 0 ? '' : 'input-text_ios'}`}
                        placeholder='评价一下此商品吧～'
                        placeholderStyle='color:#999;' />
            }
          </View>
          <View className="img-content">
            <View className="img-list">
              <View className="img-item">
                <Image className="ii_icon" src=''></Image>
              </View>
              <View className="img-item">
                <Image className="ii_icon" src=''></Image>
              </View>
              <View className="img-item">
                <Image className="ii_icon" src=''></Image>
              </View>
              <View className="img-item">
                <Image className="ii_icon" src=''></Image>
              </View>
              <View className="img-item">
                <Image className="ii_icon" src=''></Image>
              </View>
              <View className="img-item">
                <Image className="ii_icon ii_icon_camera" src={CameraIcon}></Image>
              </View>
            </View>
          </View>
        </View>

        <View style='height:118rpx;'></View>
        <View className="fixed-bottom border-top_1px">
          <View className="bottom-bar">
            <SDButton height={96} sd-class='btn-payment' onClick={this.doSubmit}>立即评价</SDButton>
          </View>
          <View style={`height: ${bottomH}px;`}></View>
        </View>
      </SDBody>
    )
  }

  onStarScoreValueChange = (index, extData) => {
    console.log(index, extData)
  }

  doSubmit = () => {

  }
}
